<script setup>
const props = defineProps({
  title: {
    type: String,
    default: 'Dialog Title'
  },
  show: {
    type: Boolean,
    default: false
  },
  onSubmit: {
    type: Function,
    default: () => {}
  }
});
const emit = defineEmits(['close']);
const closeDialog = () => {
  emit('close');
};

</script>

<template>
<div class="dialog-overlay" v-if="show">
  <div class="dialog-box">
    <div class="dialog-header">
      <h2>{{props.title}}</h2>
      <button class="close-button" @click="closeDialog">X</button>
    </div>
    <div class="dialog-content">
      <slot></slot>
    </div>
    <div class="dialog-footer">
      <button class="cancel-button" @click="closeDialog">取消</button>
      <button class="confirm-button" @click="() => {
        onSubmit ?  props.onSubmit() : closeDialog()
      }">确定</button>
    </div>
  </div>
</div>
</template>

<style scoped lang="less">
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(5px);
  transition: opacity 0.3s ease;
  opacity: 1;
  &.fade-out {
    opacity: 0;
    pointer-events: none;
  }

  .dialog-box {
    background-color: #fff;
    border-radius: 8px;
    width: max-content;
    min-width: 400px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .dialog-header {
      padding: 16px;
      border-bottom: 1px solid #e4e4e4;
      display: flex;
      justify-content: space-between;
      align-items: center;

      h2 {
        margin: 0;
        font-size: 18px;
      }

      .close-button {
        background: none;
        border: none;
        font-size: 16px;
        cursor: pointer;
      }
    }

    .dialog-content {
      padding: 16px;
      flex-grow: 1;
    }

    .dialog-footer {
      padding: 12px;
      display: flex;
      justify-content: flex-end;

      .cancel-button,
      .confirm-button {
        margin-left: 8px;
        padding: 8px 16px;
        border-radius: 4px;
        border: none;
        cursor: pointer;

        &.cancel-button {
          background-color: #f0f0f0;
          color: #333;
          &:hover {
            background-color: #e0e0e0;
          }
        }

        &.confirm-button {
          background-color: #007bff;
          color: #fff;
          &:hover {
            background-color: #0056b3;
          }
        }
      }
    }
  }
}
</style>
